<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>HR助理-上传</title>
	<link rel="icon" href="logo.png" type="image/x-icon">
	<link rel="shortcut icon" href="logo.png" type="image/x-icon">
<link rel="stylesheet" href="layui/css/layui.css">
<link href="http://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.3/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui-src@2.4.5/dist/layui.all.js"></script>
<script src="http://www.magicalcoder.com/assets/js/common.js"></script>
<script src="http://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js"></script>
<style>

</style>

</head>
<body  class="layui-form" style="">
<div id="magicalDragScene" class="mc-root mc-ui-absolute-pane">
	<div class="layui-bg-gray" style="width: 1920px; height: 700px; position: absolute; left: 0%; top: 15%;"></div>
	<img style="width: 5%; position: absolute; left: 2%; top: 0%;" src="logo.png"/>
	<label id="uuidab39b028-7f25-4aa1-9792-476906ff45b0" class="layui-form-label mc-ui-flex-center" style="position: absolute; left: 3%; top: 5%; font-size: 35px; font-weight: bold; font-style: oblique; letter-spacing: 7px; width: 15%;">HR助理</label>
	<form id="empForm" class="layui-form" style="position: absolute; left: 40%; top: 20%;" action="/upload" method="post">
		<div class="layui-form-item">
			<label class="layui-form-label" style="width: 172%;">员工档案登记</label>
		</div>
		<div class="layui-form-item">

			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">
				<label style="color: red">*</label>
				<label >姓名</label>
				</label>
				<div class="layui-input-inline">
					<input id="name" name="name" class="layui-input" lay-verify="required" type="text" autocomplete="off"/>
				</div>
			</div>
		</div>
		<div id="uuidb742580e-099d-4f88-aff7-8aab09954619" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">
					<label style="color: red">*</label>
					<label >身份证</label>
				</label>
				<div class="layui-input-inline">
					<input id="idcard" name="idcard" class="layui-input" lay-verify="required|identity" type="text" autocomplete="off"/>
				</div>
				<p style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
			</div>
		</div>
		<div id="uuidd4247a5b-6b7d-4e9f-82b2-15e6640d4447" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">
					<label style="color: red">*</label>
					<label >性别</label>
				</label>
				<div class="layui-input-inline">
					<input name="sex" title="男" type="radio" value="男" checked="true"/>
					<input name="sex" title="女" type="radio" value="女"/>
				</div>
			</div>
		</div>
		<div id="uuidcbcc8c14-e7a0-4d2c-8e9b-6febcca5b2cc" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">
					<label style="color: red">*</label>
					<label >手机号</label>
				</label>
				<div class="layui-input-inline">
					<input id="phone" name="phone" class="layui-input" lay-verify="required|phone" type="text" autocomplete="off"/>
				</div>
			</div>
		</div>
		<div id="uuid8c7ba59c-9cb4-4b14-a314-9b7950cbb321" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">文化程度</label>
				<div class="layui-input-inline">
					<select name="edu">
						<option value="0">无接受教育</option>
						<option value="1">小学</option>
						<option value="2">中专</option>
						<option value="3">高职</option>
						<option value="4">大学</option>
						<option value="5">博士</option>
						<option value="6">硕士</option>
					</select>
				</div>
			</div>
		</div>
		<div id="uuide5b6b12e-b33b-4606-9200-ffa34b0e4fff" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">婚姻</label>
				<div class="layui-input-inline">
					<input name="mar" title="有" type="radio" value="1"/>
					<input name="mar" title="无" type="radio" value="0" checked="true"/>
				</div>
			</div>
		</div>
		<div id="uuideedc75eb-e2e0-478a-8ed9-6c0a62d65355" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">籍贯</label>
				<div class="layui-input-inline">
					<input id="hometown" name="home" class="layui-input" type="text" autocomplete="off"/>
				</div>
			</div>
		</div>
		<div id="uuid90619b74-a606-4605-8b1a-1d0f4623c1ce" class="layui-form-item">
			<div class="layui-inline" style="width: 448%;">
				<label class="layui-form-label">工龄</label>
				<div class="layui-input-inline">
					<input id="year" name="year" class="layui-input" type="text" autocomplete="off"/>
				</div>
			</div>
		</div>
		<div id="T2" class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" onclick="save()">提交</button>
			</div>
		</div>
	</form>
</div>
<script>

	function save(){
		console.log(form);
		if(form);
	}

function Number(val) {
　　if (parseFloat(val).toString() == "NaN") {
　　　　return false;
　　} else {
　　　　return true;
　　}
}

//以下脚本为标签属性转换成layui组件的还原过程
//调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
var $ = layui.jquery, laytpl = layui.laytpl, laydate = layui.laydate, form = layui.form, layedit = layui.layedit, slider = layui.slider, element = layui.element, colorpicker = layui.colorpicker, upload = layui.upload, rate = layui.rate, carousel = layui.carousel, table = layui.table, flow = layui.flow;
var magicalDragLayuiUtil = {
    rebuildLayUiControls: function () {
        var _t = this;
        //日期
        $(".magicalcoder-laydate").each(function (idx, item) {
            laydate.render(_t.iteratorAttr({
                elem: item
            }, item));
        })
        //富文本
        $(".magicalcoder-layedit").each(function (idx, item) {
            var mcDataId = $(item).attr("id");
            if (mcDataId) {
                layedit.build(mcDataId, {
                    height: 300
                });
            }
        })
        //外键
        $(".magicalcoder-foreign-select2").each(function (idx, item) {
            var mcDataId = $(item).attr("id");
            if (mcDataId) {
                $("#" + mcDataId).select2({
                    allowClear: true,
                    width: "150px",
                    delay: 500,
                });
            }
        })
        //颜色选择器
        $(".magicalcoder-color-picker").each(function (idx, item) {
            colorpicker.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //上传组件
        $(".magicalcoder-layupload").each(function (idx, item) {
            upload.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //滑块
        $(".magicalcoder-slider").each(function (idx, item) {
            slider.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //评分
        $(".magicalcoder-rate").each(function (idx, item) {
            rate.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //轮播
        $(".layui-carousel").each(function (idx, item) {
            carousel.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //流加载
        $(".magicalcoder-flow").each(function (idx, item) {
            flow.load(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //代码
        $(".magicalcoder-code").each(function (idx, item) {
            layui.code(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //弹窗
        $(".magicalcoder-layer").each(function (idx, item) {
            //先隐藏起来
            $(this).next().hide();
            $(this).click(function () {
                var config = _t.iteratorAttr({
                    elem: $(item)}, item);
                var type = config.type;
                if (type + '' == 1) {
                    config.content = $(this).next();
                   if (!config.content.hasClass("magicalcoder-layer-content")) {
                        config.content = config.content.find(".magicalcoder-layer-content")
                    }                }
                if (config.btn) {
                    config.btn = config.btn.split(",")
                }
                if (config.area) {
                    config.area = config.area.split(",")
                }
                layer.open(config)
            })
        })
        //动态表格 我们单独封装了layui-table的初始化方式 至于数据排序 返回格式 等操作请根据你的具体环境自行封装
        $(".magicalcoder-table").each(function (idx,
            item) {
            var cols = [];
            //读取列配置
            $(this).find(".magicalcoder-table-th").each(function (i, th) {
                cols.push(_t.iteratorAttr({
                    title: $(this).text()}, th));
            })
            var tableConfig = _t.iteratorAttr({
                elem: $(item),
                cols: [cols]},
                item);
            //初始化表格 至于返回的数据格式 您可以根据自己的系统自行改造 这里仅做一个示例 参考js\\data\\list.json
            table.render(tableConfig);
        })
        //部分组件初始化
        element.init();
        //表单初始化
        form.render();
    },
    //将标签上的属性 转换成layui函数初始化时的参数名:参数值
    iteratorAttr: function (renderConfig, dom) {
        var attrs = dom.attributes;
        for (var i = 0; i < attrs.length; i++) {
            var attr = attrs[i];
            var name = attr.name;
            var value = attr.value;
            if (name.indexOf("mc-") === 0) {
                name = name.replace("mc-attr-", '');
                name = name.replace("mc-event-", '');
                if (name.indexOf('str-') === 0) {
                    name = name.replace('str-', '');
                } else if (name.indexOf('bool-') === 0) {
                    name = name.replace('bool-', '');
                    value == 'true' || value === '' ? value = true: value = value;
                    value == 'false' ? value = false: value = value;
                } else if (name.indexOf('num-') === 0) {
                    name = name.replace('num-', '');
                    if (value !== '' && !isNaN(value)) {
                        value = parseFloat(value);
                    }
                } else if (name.indexOf('json-') === 0) {
                    name = name.replace('json-', '');
                    if (value !== '') {
                        value = JSON.parse(value);
                    }
                }
                renderConfig[this.htmlAttrNameToTuoFeng(name)] = value;
            }
        }
        return renderConfig;
    },
    //user-name -> userName html上的标签名转换成驼峰名称
    htmlAttrNameToTuoFeng: function (name) {
        var arr = name.split("-");
        var newArr = []
        for (var i = 0; i < arr.length; i++) {
            if (i != 0) {
                if (arr[i] != '') {
                    newArr.push(this.firstCharToUpLower(arr[i]));
                }
            } else {
                newArr.push(arr[i]);
            }
        }
        return newArr.join('');
    },
    //首字母大写
    firstCharToUpLower: function (name) {
        var arr = name.split("");
        arr[0] = arr[0].toUpperCase();
        return arr.join('');
    },
}
magicalDragLayuiUtil.rebuildLayUiControls();
//echarts自动初始化
new McECharts().render();
//functions-begin
//functions-end
</script>
</body>

</html>